<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <title>inject &lt;mqtt-connection&gt; Demo</title>
  <script src="../../webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="../mqtt-elements.html">
  <link rel="import" href="../../paper-button/paper-button.html">
  <link rel="import" href="../../paper-input/paper-input.html">
</head>

<body>
<template is="dom-bind">

  <!--
    First we create a mqtt-connection that actually makes a mqtt-connection over websockets to an MQTT broker.
    That connection will create {{client}} and populates the variable
  -->
  <mqtt-connection auto
                   id="connection"
                   url="ws://127.0.0.1:3005"
                   connected="{{connected}}"
                   client="{{client}}">
  </mqtt-connection>


  <!--
    The second mqtt-connection has not set the auto attribute nor the url property and therefor will not create the
    MQTT client, but will get connected as soon the client property will be set.
  -->

  <mqtt-connection id="connection2"
                   connected="{{connected2}}"
                   client="[[client]]"
                   subscriptions="{{subscriptions}}">

    <!--
      for every item (topic) in subs the dom-repeat element will create on mqtt-subscription element within the
      mqtt-connection element, resulting in an mqtt subscription for every topic.
     -->
    <template is="dom-repeat" items="{{subs}}">
      <mqtt-subscription topic="[[item]]"
                         number-of-messages="10"></mqtt-subscription>
    </template>

  </mqtt-connection>

  <!--showing the status of both mqtt-connection elements-->
  <h1>Status of #connection: <span>[[_connectionStatusToString(connected)]]</span></h1>
  <h1>Status of #connection2: <span>[[_connectionStatusToString(connected2)]]</span></h1>

  <!--a simple input field to set the mqtt-topic-->
  <paper-input label="topic" value="{{topic}}"></paper-input>

  <!--a simple input field to set the mqtt-message-->
  <paper-input label="message" value="{{message}}"></paper-input>

  <!--a button to add a subscription-->
  <paper-button raised on-tap="_addSub">Add Sub</paper-button>

  <!--a button to send a mqtt message-->
  <paper-button raised on-tap="_sendMessage">Send Message</paper-button>

  <div id="content">
    <h1>Subscriptions:</h1>
    <hr/>
    <template is="dom-repeat" items="{{subscriptions}}">
      <div>Topic: <span>{{item.topic}}</span></div>
      <div>Subscribed: <span>{{item.subscribed}}</span></div>
      <h4>Messages:</h4>
      <template is="dom-repeat" items="{{item.messages}}" as="message">
        <div>
          <span>{{message.topic}}</span>:<span>{{message.parsedPayload}}</span>
        </div>
      </template>
      <hr/>
    </template>
  </div>
</template>

<script>

  var demo = document.querySelector('template[is="dom-bind"]');
  var connection = document.querySelector('#connection');

  demo.subs = ["foo/bar", "mqttjs/elements"];

  demo._sendMessage = function () {
    this.$.connection.publish(this.topic, this.message);
  };

  demo._addSub = function () {
    this.push("subs", demo.topic);
  };

  demo._connectionStatusToString = function(condition){
    if (condition){
      return "connected";
    } else {
      return "disconnected";
    }
  };


</script>
</body>
</html>
